<!-- 部门预约统计图表 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form
        ref="ruleForm"
        :model="formData"
        :inline="true"
        class="ky-form-inline ky-form-inline-sm"
        :rules="rules"
        label-width="84px"
      >
        <el-form-item label="医院名称:" prop="hospitalCode">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.hospitalCode"
            placeholder="请选择"
            filterable
            @change="handleChange('hospital')"
          >
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影像区域:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.depArea"
            multiple
            placeholder="请选择"
            clearable
            @change="handleChange('depArea')"
          >
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.dep"
            multiple
            placeholder="请选择"
            clearable
            @change="handleChange('dep')"
          >
            <el-option
              v-for="(item,index) in scheduledDepOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间:" prop="timeRange">
          <el-date-picker
            v-model="formData.timeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button> -->
          <el-button
            type="primary"
            class="m-l-0 click-button"
            size="small"
            @click="search"
            icon="el-icon-search"
            :loading="dataLoading"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>可预约比例</h3>
            <div class="pie" id="pie"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>已预约比例</h3>
            <div class="pie" id="pie2"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>部门预约率</h3>
            <div id="echartsBar" class="echarts-bar"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>部门预约来源比例</h3>
            <div id="echartsBar2" class="echarts-bar"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>部门患者类型比例</h3>
            <div id="echartsBar3" class="echarts-bar"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <div class="content-chart">
            <h3>预约来源改约比例</h3>
            <div id="echartsBar4" class="echarts-bar"></div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { dateFormatter } from '@/utils/validate'
import echartsTooltipCarousel from '@/utils/echarts-tooltip-carousel'
import { getDataForDepChart, getDepAreaList, getDepList } from '@/api/api.js'
// import paginationCont from '@/components/Pagination/index'
export default {
  name: 'ChartAppointmentDep',
  mixins: [],
  // components: { paginationCont },
  data() {
    return {
      rules: {
        timeRange: { type: 'array', required: true, message: '请选择记录时间', trigger: 'change' }
      },
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        operateUser: '',
        operatorStatus: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)],
        depArea: [],
        modality: [],
        checkRoom: []
      },
      depAreaOptions: [],
      scheduledDepOptions: [],
      modalityOptions: [],
      checkRoomOptions: [],
      dataLoading: false,
      downloadLoading: false,
      allData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      pieData1: [],
      pieData2: [],
      lineData: [],
      xdata: [],
      xdata1: [],
      ydata1: [],
      typeData1: [],
      xdata2: [],
      ydata2: [],
      typeData2: [],
      series1: [],
      series2: [],
      // 改约
      xdata3: [],
      typeData3: [],
      series3: []
    }
  },
  watch: {},
  computed: {},
  created() {

  },
  async mounted() {
    this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    try {
      await this.getDepAreaOptions()
      this.getScheduledDepOptions()
    } catch (err) {
      console.log(err)
    }
    this.search()
  },
  methods: {
    echartsPie() {
      let myChart = this.$echarts.init(document.getElementById('pie'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          top: '-10',
          right: '0%',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#5a5a5a',
            fontSize: 12,
            padding: [6, 0, 0, 0]
          },
          type: 'scroll', //
          pageIconColor: '#6495ed', // 翻页下一页的三角按钮颜色
          pageIconInactiveColor: '#aaa', // 翻页（即翻页到头时）
          pageIconSize: 10, // 翻页按钮大小
          pageFormatter: '', // 隐藏翻页的数字
          pageButtonItemGap: -6, // 翻页按钮的两个之间的间距
          data: this.xdata,
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue = 0
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            let p = ((tarValue / total) * 100).toFixed(1)
            return name + ' ' + ' ' + p + '%'
          }
        },
        series: [
          {
            name: '预约方式占比',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            data: this.pieData1
          }
        ]
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    echartsPie2() {
      let myChart = this.$echarts.init(document.getElementById('pie2'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          top: '-10',
          right: '0%',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#5a5a5a',
            fontSize: 12,
            padding: [6, 0, 0, 0]
          },
          type: 'scroll', //
          pageIconColor: '#6495ed', // 翻页下一页的三角按钮颜色
          pageIconInactiveColor: '#aaa', // 翻页（即翻页到头时）
          pageIconSize: 10, // 翻页按钮大小
          pageFormatter: '', // 隐藏翻页的数字
          pageButtonItemGap: -6, // 翻页按钮的两个之间的间距
          data: this.xdata,
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue = 0
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            let p = ((tarValue / total) * 100).toFixed(2)
            return name + ' ' + ' ' + p + '%'
          }
        },
        series: [
          {
            name: '预约方式占比',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            data: this.pieData2
          }
        ]
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    echartsBar() {
      let myChart = this.$echarts.init(document.getElementById('echartsBar'))
      let option = {
        color: ['#3ba1ff'],
        // title: {
        //   text: '预约量趋势',
        //   textStyle: {
        //     fontSize: 17,
        //     fontWeight: 100
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: '{a}：{c}%'
        },
        grid: {
          top: 60,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          top: 20,
          iconStyle: {
            normal: {
              borderColor: '#00c0ef'
            }
          }
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: 'none'
          //   },
          //   dataView: { readOnly: false },
          //   magicType: { type: ['line', 'bar'] },
          //   restore: {},
          //   saveAsImage: {}
          // }
        },
        // legend: {
        //   data: ['申请量', '会诊量', '跟踪执行', '随访量'],
        //   right: '10'
        // },
        xAxis: {
          data: this.xdata,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12
            },
            interval: 0,
            rotate: 40
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12,
              innerWidth: 30
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#e8e8e8'],
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '部门预约率',
            type: 'bar',
            barMaxWidth: 100,
            data: this.lineData
          }
        ]
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    // 堆叠状图
    echartsBar2() {
      let myChart = this.$echarts.init(document.getElementById('echartsBar2'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.typeData1
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xdata1,
            axisLabel: {
              textStyle: {
                color: '#5a5a5a',
                fontSize: 12
              },
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: this.series1
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    echartsBar3() {
      let myChart = this.$echarts.init(document.getElementById('echartsBar3'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.typeData2
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xdata2,
            axisLabel: {
              textStyle: {
                color: '#5a5a5a',
                fontSize: 12
              },
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: this.series2
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    echartsBar4() {
      let myChart = this.$echarts.init(document.getElementById('echartsBar4'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.typeData3
        },
        grid: {
          left: '3%',
          // right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xdata3,
            name: '原预约',
            axisLabel: {
              textStyle: {
                color: '#5a5a5a',
                fontSize: 12
              },
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '改约后',
            minInterval: 1
          }
        ],
        series: this.series3
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 10, 5000)
    },
    frtTime(row, column, cellValue, index) {
      // 处理后台时间
      let time = ''
      if (cellValue) {
        time = cellValue.slice(0, 10)
      }
      return time
    },
    resetParam() {
      // 重置
      this.formData = {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        operateUser: '',
        operatorStatus: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)],
        depArea: [],
        modality: [],
        checkRoom: []
      }
      //   this.search()
    },
    search() {
      // 查询
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.dataLoading = true
      let data = {
        hospitalCode: this.formData.hospitalCode,
        dateArr: this.formData.timeRange.join(','),
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        // modality: this.formData.modality.join(','),
        checkRoom: this.formData.checkRoom.join(',')
      }
      getDataForDepChart(data).then(res => {
        this.dataLoading = false
        if (!res) return
        console.log('res.Conten', res.Content)
        this.allData = res.Content
        let pieData1 = []
        let pieData2 = []
        let lineData = []
        let xdata = []
        for (let item of this.allData.BaseData) {
          xdata.push(item['DEP'])
          if (item['KYY'] > 0) {
            pieData1.push({ value: item['KYY'], name: item['DEP'] })
          }
          if (item['YYY'] > 0) {
            pieData2.push({ value: item['YYY'], name: item['DEP'] })
          }
          lineData.push(item['YYL'])
        }
        this.pieData1 = pieData1
        this.pieData2 = pieData2
        this.lineData = lineData
        this.xdata = xdata
        this.echartsPie()
        this.echartsPie2()
        this.echartsBar()
        this.computedData()
        this.computedData2()
        this.computedData3() // 改约统计
      }).catch(() => {
        this.dataLoading = false
      })
    },
    computedData() {
      let xdata1 = []
      let typeData1 = []
      let ydata1 = []
      let series1 = []
      for (let jitem of this.allData.DepSource) {
        console.log('000', jitem['APPOINTMENT_TYPE'])
        if ((xdata1.findIndex(xitem => xitem == jitem['DEP'])) == -1) {
          xdata1.push(jitem['DEP'])
        }
        if ((typeData1.findIndex(titem => titem == jitem['APPOINTMENT_TYPE'])) == -1) {
          typeData1.push(jitem['APPOINTMENT_TYPE'])
        }
      }
      console.log('xdata1', xdata1, 'typeData1', typeData1)

      for (let j = 0; j < typeData1.length; j++) {
        series1.push({
          name: typeData1[j],
          type: 'bar',
          stack: 'aaa',
          barMaxWidth: 100,
          emphasis: {
            focus: 'series'
          },
          data: []
        })
        for (let pitem of xdata1) {
          // for (let iitem of res.Content.DepPatType) {
          //   console.log('1111', iitem, iitem.DEP == pitem && iitem.PATIENT_TYPE == typeData2[j])
          //   if (iitem.DEP == pitem && iitem.PATIENT_TYPE == typeData2[j]) {
          //     series2[j].data.push(iitem.SL)
          //     break
          //   }
          // }
          let has = this.allData.DepSource.findIndex(iitem => iitem.DEP == pitem && iitem.APPOINTMENT_TYPE == typeData1[j])
          if (has >= 0) {
            series1[j].data.push(this.allData.DepSource[has].SL)
          } else {
            series1[j].data.push(0)
          }
        }
      }
      console.log('series1', series1)
      this.xdata1 = xdata1
      this.ydata1 = ydata1
      this.typeData1 = typeData1
      this.series1 = series1
      this.echartsBar2()
    },
    computedData2() {
      let xdata2 = []
      let typeData2 = []
      let ydata2 = []
      let series2 = []
      for (let jitem of this.allData.DepPatType) {
        console.log('111')
        if ((xdata2.findIndex(xitem => xitem == jitem['DEP'])) == -1) {
          xdata2.push(jitem['DEP'])
        }
        if ((typeData2.findIndex(titem => titem == jitem['PATIENT_TYPE'])) == -1) {
          typeData2.push(jitem['PATIENT_TYPE'])
        }
      }
      console.log('xdata2', xdata2, 'typeData2', typeData2)

      for (let j = 0; j < typeData2.length; j++) {
        series2.push({
          name: typeData2[j],
          type: 'bar',
          barMaxWidth: 100,
          stack: 'aaa',
          emphasis: {
            focus: 'series'
          },
          data: []
        })
        for (let pitem of xdata2) {
          // for (let iitem of res.Content.DepPatType) {
          //   console.log('1111', iitem, iitem.DEP == pitem && iitem.PATIENT_TYPE == typeData2[j])
          //   if (iitem.DEP == pitem && iitem.PATIENT_TYPE == typeData2[j]) {
          //     series2[j].data.push(iitem.SL)
          //     break
          //   }
          // }
          let has = this.allData.DepPatType.findIndex(iitem => iitem.DEP == pitem && iitem.PATIENT_TYPE == typeData2[j])
          if (has >= 0) {
            series2[j].data.push(this.allData.DepPatType[has].SL)
          } else {
            series2[j].data.push(0)
          }
        }
      }
      console.log('series2', series2)
      this.xdata2 = xdata2
      this.ydata2 = ydata2
      this.typeData2 = typeData2
      this.series2 = series2
      this.echartsBar3()
    },
    // 改约统计
    computedData3() {
      let xdata = []
      let typeData = []
      let series = []
      for (let jitem of this.allData.ChangeAppointment) {
        console.log('000', jitem['APPOINTMENT_TYPE'])
        if ((xdata.findIndex(xitem => xitem == jitem['FIRST_APPOINTMENT_TYPE'])) == -1) {
          xdata.push(jitem['FIRST_APPOINTMENT_TYPE'])
        }
        if ((typeData.findIndex(titem => titem == jitem['APPOINTMENT_TYPE'])) == -1) {
          typeData.push(jitem['APPOINTMENT_TYPE'])
        }
      }
      console.log('xdata', xdata, 'typeData', typeData)

      for (let j = 0; j < typeData.length; j++) {
        series.push({
          name: typeData[j],
          type: 'bar',
          stack: 'aaa',
          emphasis: {
            focus: 'series'
          },
          barMaxWidth: 100,
          data: []
        })
        for (let pitem of xdata) {
          let has = this.allData.ChangeAppointment.findIndex(iitem => iitem.FIRST_APPOINTMENT_TYPE == pitem && iitem.APPOINTMENT_TYPE == typeData[j])
          if (has >= 0) {
            series[j].data.push(this.allData.ChangeAppointment[has].SL)
          } else {
            series[j].data.push(0)
          }
        }
      }
      console.log('series', series)
      this.xdata3 = xdata
      this.typeData3 = typeData
      this.series3 = series
      this.echartsBar4()
    },
    getDepAreaOptions() {
      /* 影像区域列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      return new Promise(async resolve => {
        await getDepAreaList(params).then((res) => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(',')
      }
      return new Promise(async resolve => {
        await getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.scheduledDepOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    async handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.scheduledDepOptions = []
          this.formData.depArea = []
          this.formData.dep = []
          try {
            this.search()
            await this.getDepAreaOptions()
            this.getScheduledDepOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'depArea':
          this.getScheduledDepOptions()
          this.formData.dep = []
          break
        default:
          break
      }
    }
  },
  beforeDestroy() { },
  destroyed() { },
  beforeUpdate() { },
  updated() { }
}
</script>
<style lang='scss' scoped>
.ky-container {
  .param-type_input {
    /deep/ .el-input__inner {
      width: 180px;
    }
  }
  .content-title {
    margin-left: 4px;
    margin-bottom: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}
// .ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner {
//   width: 456px;
// }

.content-chart {
  border-left: 10px solid #f1f2f5;
  background: #fff;
  margin-top: 10px;
  padding: 5px 20px;
  border-bottom: 2px solid #f1f2f5;
  // width: 50%;
  // float: left;
  h3 {
    font-size: 17px;
    font-weight: 100;
  }
  .pie {
    width: 100%;
    height: 300px;
  }
  .echarts-bar {
    width: 100%;
    height: 300px;
    // float: left;
    // margin-top: 20px;
  }
}
</style>
